<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索页</title>
    <!-- 页面样式文件 -->
    <link rel="stylesheet" href="./search.css">
    <!-- 插件相关文件 -->
    <link rel="stylesheet" href="./flexible.css">
    <script src="./flexible.js"></script>
    <!-- jQuery插件 -->
    <script src="./jquery.js"></script>
    <script>
        $(document).ready(function(){
            /*1、监听用户输入关键词*/
            $('.toSearch').on('input',function(){
                /*2、获取用户输入信息*/
                var keyWords = $(this).val();
                console.log('https://suggest.taobao.com/sug?code=utf-8&q='+keyWords+'&callback=cb')
                /*7、完善：当用户输入为空时，清空列表*/
                if(keyWords == ''){
                    console.log('内容为空')
                    $('.ajax_list').remove();/*移出内容*/
                }
                /*3、将获取到的用户输入内容，传递给后台，进行ajax交互*/
                $.ajax({
                    url: 'https://suggest.taobao.com/sug?code=utf-8&q='+keyWords+'&callback=cb', // 请求的地址
                    cache: true, // 是否缓存，get请求如果url没有发生变化，则会走缓存
                    type: 'get', // 请求的方式（get/post），默认为get。获取数据一般都是get请求
                    timeout: '3000', // 设置请求超时时间，单位毫秒
                    data: '', // 发送到后端的数据
                    dataType: 'jsonp', // 预期服务器返回的数据类型，有xml, html, script, json, jsonp, text
                    success: function(data) {
                        console.log('---请求成功---')
                        console.log(data)
                        var result = data.result;/*商品数组*/
                        /*4、判断是否存在商品*/
                        if(result.length > 0){
                            console.log('有相关商品')
                            /**遍历数组，将数组里的内容拿出来，进行手动拼接，拼接成ul-li列表
                             * 将拼接好的列表ul-li插入到按钮后面
                            <ul class="ajax_list">
                                <li>12xxx</li>    
                                <li>12xxx</li>    
                                <li>12xxx</li>    
                                <li>12xxx</li>    
                                <li>12xxx</li>    
                                <li>12xxx</li>    
                                <li>12xxx</li>    
                                <li>12xxx</li>    
                                <li>12xxx</li>    
                            
                            */
                            /*5、动态拼接html字符串*/
                            var htmlString = '<ul class="ajax_list">';
                                for(var i=0;i<result.length;i++){
                                    htmlString += '<li>'+
                                        '</span>'+result[i][0]+'</span>'+
                                        '<img src="./img/arrow.png">'
                                        '</li>';
                                }
                                htmlString += '</ul>';
                            /*6、动态插入*/
                            $('.search_btn').nextAll().remove();/*删除旧内容*/
                            $('.search_btn').after(htmlString);/*添加新内容*/
                        }else{
                            console.log('没有相关商品')
                            /*优化：若输入内容不为空，且没有该关键词相关商品时弹框提示*/
                            if(keyWords != ''){
                                $('.prompt_mask').show(1000,function(){
                                    $('.prompt_mask').hide(1000)
                                })
                                $('.ajax_list').remove();/*移出内容*/
                            }
                        }
                    }, // 成功的回调
                    error: function(err) {
                        console.log('---请求失败---')
                        console.log(err)
                    }, // 失败的回调
                    complete: function() {}, // 请求完成后调用的函数，请求成功或失败均调用
                    global: true // 是否触发全局的ajax事件，默认为true
                });
            })
        })
    </script>
</head>
<body>
    <!-- 顶部 -->
    <div class="header">
        <!-- 左 -->
        <div class="go_back">
            &lt;
        </div>
        <!-- 中间搜索框 -->
        <form class="search">
            <img src="https://p0.meituan.net/travelcube/99c29829cf1b85d5cdbc76a1bd0b7329814.png" alt="">
            <!-- input框禁止输入---H5新增属性readonly（只读）、disabled（禁止-石化效果，添加石化的淡灰色背景） -->
            <input class="toSearch" type="text" placeholder="请输入关键字">
        </form>
        <!-- 右 -->
        <button class="search_btn">搜索</button>
        <!-- 二级列表--关键词的关联推荐---ajax交互后后台返回的列表数据 -->
        <!-- <ul class="ajax_list">
            <li>
                <span>帽子男</span>
                <img src="./img/arrow.png" alt="">
            </li>
            <li>
                <span>帽子女</span>
                <img src="./img/arrow.png" alt="">
            </li>
            <li>
                <span>帽子男春秋</span>
                <img src="./img/arrow.png" alt="">
            </li>
            <li>
                <span>帽子男冬</span>
                <img src="./img/arrow.png" alt="">
            </li>
            <li>
                <span>帽子女冬</span>
                <img src="./img/arrow.png" alt="">
            </li>
            <li>
                <span>帽子婴儿</span>
                <img src="./img/arrow.png" alt="">
            </li>
            <li>
                <span>帽子男宝宝</span>
                <img src="./img/arrow.png" alt="">
            </li>
            <li>
                <span>帽子女宝宝</span>
                <img src="./img/arrow.png" alt="">
            </li>
            <li>
                <span>帽子女遮阳</span>
                <img src="./img/arrow.png" alt="">
            </li>
        </ul> -->
    </div>
    <!-- 底部 -->
    <div class="hot_list">
        <!-- 上 -->
        <div class="hot_top">
            <span>热门搜索</span>
            <span>隐藏</span>
        </div>
        <!-- 下 -->
        <!-- 显示状态下的列表 -->
        <div class="show_list">
            <span>婴儿爬行垫</span>
            <span>电脑椅</span>
            <span>婴儿爬行垫</span>
            <span>记忆棉坐垫</span>
            <span>婴儿爬行垫</span>
            <span>跑步机</span>
            <span>除湿机</span>
            <span>蜡烛香薰</span>
        </div>
        <!-- 隐藏状态下的文本 -->
        <div class="hide_list">
            <span>已隐藏搜索发现</span>
        </div>
    </div>
    <!-- 局部弹框遮罩提示层 -->
    <div class="prompt_mask">没有相关商品</div>
    <!-- 内部脚本代码 -->
    <script>
        /** 1、自动聚焦*/
        var toSearch = document.querySelector('.toSearch');
        toSearch.focus();

        /** 2、返回上一页*/
        var go_back = document.querySelector('.go_back');
        go_back.onclick = function(){
            /*
                JS返回上一页
                1）window.history.back()
                2）window.history.go(-1)
                3）window.location.href = '上一页地址'
            */
            window.history.back()
        }

        /** 3、手动校验表单数据合法性，完成提交*/
        var search_btn = document.querySelector('.search_btn');
        search_btn.onclick = function(){
            /*判断表单输入项数据的合法性*/
            if(toSearch.value == ''){
                alert('输入项不能为空')
            }else{
                document.querySelector('form.search').submit()
            }
        }

        /** 4、显示隐藏列表切换*/
        var change_btn = document.querySelector(".hot_top span:nth-of-type(2)")
        change_btn.onclick = function(){
            var text = change_btn.innerText;
            console.log(typeof(text))
            if(text == '隐藏'){
                change_btn.innerText = '显示';//文本切换
                document.querySelector('.show_list').style.display = 'none';
                document.querySelector('.hide_list').style.display = 'flex';
            }else{
                change_btn.innerText = '隐藏';//文本切换
                document.querySelector('.show_list').style.display = 'block';
                document.querySelector('.hide_list').style.display = 'none';
            }
        }
    </script>
</body>
</html>